import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 1000
    height: 480
    title: qsTr("Hello World")


    //列
    DarkSquare {
        id: root1
        width: 120
        height: 240
        x:0
        y:0
        Column {
            id: column
            anchors.centerIn: parent
            spacing: 8
            RedSquare {}
            BrightSquare {}

        }
    }


    //行
    DarkSquare {
        id: root2
        width: 240
        height: 120
        x:160
        y:0
        Row {
            id: row
            anchors.centerIn: parent
            spacing: 8
            RedSquare {}
            BrightSquare {}

        }
    }

    //栅格
    DarkSquare {
        id: root3
        width: 400
        height: 200
        x:0
        y:250
        Grid {
            id: grid
            rows:3
            columns: 3
            anchors.centerIn: parent
            spacing: 8
            RedSquare {}
            BrightSquare {}
            BrightSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
        }
    }

    //流
    DarkSquare {
        id: root4
        width: 200
        height: 400
        x:420
        y:0
        Flow {
            id: flow
            anchors.centerIn: parent
            anchors.margins:  20
            flow:Flow.TopToBottom
            spacing: 8
            RedSquare {}
            BrightSquare {}
            BrightSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
            RedSquare {}
        }
    }


    //重复元素
    DarkSquare {
        id: root5
        width: 252
        height: 480
        x:700
        y:0
        property  variant colorArray: ["#00bde3", "#67c111",  "#ea7025"]
        Grid {
            anchors.fill: parent
            anchors.margins: 8
            spacing: 4
            Repeater {
                model: 22  //循环创建多少元素
                //循环创建元素，采用栅格布局
                Rectangle {
                    width:56;height: 56
                    property int colorIndex: Math.floor(Math.random()*3)// This is available in all editors.
                    color: root5.colorArray[colorIndex]
                    border.color: Qt.lighter(color)
                    Text {
                        anchors.centerIn:  parent
                        color: "#f0f0f0"
                        text: "Cell  " + index
                    }

                }
            }
        }
    }
}


